<template>
	<view>
		<!-- 底部菜单 -->
		<view class="footer">
			<view class="icons">
				<view class="box" @click="showKefu()">
					<view class="icon kefu"></view>
					<view class="text">客服</view>
				</view>
				<view>
					<uniNumberBox
							:min="1"
							:step='1'
							:max="goodsData.number"
							:value="requestData.addShoppingCartNum"
							:isMax="requestData.addShoppingCartNum<=goodsData.number?true:false"
							:isMin="requestData.addShoppingCartNum===1"
							@eventChange="numberChange"
					></uniNumberBox>
				</view>
			</view>
			<view class="btn">
				<view class="joinCart" @tap="joinCart">加入购物车</view>
				<view class="buy" @tap="buy">立即购买</view>
			</view>
		</view>
		<!-- 商品主图轮播 -->
		<view class="swiper-box">
			<swiper circular="true" autoplay="true">
				<swiper-item  v-if="goodsData.cover_info">
					<image :src="goodsData.cover_info.url"></image>
				</swiper-item>
				<swiper-item v-if="goodsData.picture" v-for="(swiper, index) in goodsData.picture" :key="index">
					<image :src="swiper.url"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 标题 价格 -->
		<view class="info-box goods-info">
			<view class="price">￥{{goodsData.price}} <span>库存：{{goodsData.number}}</span></view>
			<view class="title">
				{{goodsData.name}}
			</view>
		</view>
		<!-- 详情 -->
		<view class="description">
			<view class="title">———— 商品详情 ————</view>
			<!--这个东西无法解析视频标签-->
			<!--<view class="content">-->
				<!--<rich-text :nodes="goodsData.desc"></rich-text>-->
				<u-parse :content="goodsData.desc" />
			<!--</view>-->
		</view>
		<!-- 评价 -->
		<view class="info-box comments" id="comments">
			<view class="row">
				<view class="text">商品评价({{goodsData.comment_count}})</view>
				<view class="arrow">
					<view class="show" @tap="showhuifu()">
						我有问题
						<view class="icon tongzhi"></view>
					</view>
				</view>
			</view>
			<view class="uni-comment" v-if="goodsDataComment.length">
				<view class="uni-comment-list" v-for="(item, index) in goodsDataComment" :key="index">
					<view class="uni-comment-face">
						<image :src="item.client_info.avatar_info.url" mode="widthFix"></image>
					</view>
					<view class="uni-comment-body"  @longtap="delHuifu(item.client_id, index, item.id)">
						<view class="uni-comment-top">
							<text>{{item.client_info.name}}</text><text class="uni-comment-date">{{item.created_at}}</text>
						</view>
						<view class="uni-comment-content"  @longtap.stop @click="showReply(item.id,item.client_id)">{{item.msg}}</view>
						<view class="uni-comment-content"  style="background:#ccc;" v-for="(pItem, pIndex) in item.reply" :key="pIndex">
							<span style="color: #4399fc;">{{pItem.from_client_info.name}}</span>回复<span style="color: #4399fc;">{{pItem.to_client_info.name}}</span>：<span @longtap.stop @click="showReply(item.id,pItem.from_client_id)">{{pItem.reply_msg}}</span>
						</view>
					</view>

				</view>
				<uni-load-more :status="loadMoreStatus"></uni-load-more>
			</view>
			<view class="uni-comment" v-else>
				<uni-load-more status="noMore"></uni-load-more>
			</view>
		</view>

		<!--联系卖家 客服 弹出-->
		<view>
			<neil-modal :show="kefu" @close="closeKefu()" @confirm="goKefu()" title="联系卖家">
				<view class="input-view">
					<view class="input-name">
						<view>昵称</view>
						<input type="text" placeholder="卖家昵称" v-if="goodsData.client_info" disabled :value="goodsData.client_info.name"/>
					</view>
					<view class="input-password">
						<view>手机</view>
						<input type="text"  placeholder="卖家手机号码" v-if="goodsData.client_info" disabled :value="goodsData.client_info.mobile"/>
					</view>
				</view>
			</neil-modal>
		</view>

		<!--评论-->
		<view>
			<neil-modal :show="huifu" @close="closeHuifu()" title="请提问" @confirm="goHuifu()">
				<view class="input-view">
					<view class="input-name">
						<view>内容</view>
						<input type="text" placeholder="请输入内容" v-model="requestData.msg"/>
					</view>
				</view>
			</neil-modal>
		</view>

		<!--回复-->
		<view>
			<neil-modal :show="reply" @close="closeReply()" title="回复ta" @confirm="goReply()">
				<view class="input-view">
					<view class="input-name">
						<view>内容</view>
						<input type="text" placeholder="请输入内容" v-model="requestData.replyMsg"/>
					</view>
				</view>
			</neil-modal>
		</view>
	</view>
</template>

<script>
import uniNumberBox from "@/components/uni-number-box.vue"
import { goods, cart } from '../../common/config'
import uniLoadMore from "@/components/uni-load-more"
import { mapState, mapMutations } from 'vuex'
import neilModal from '@/components/neil-modal.vue';
import uParse from '@/components/u-parse/u-parse.vue'

export default {
    components: { uniNumberBox, uniLoadMore, neilModal ,uParse},
    computed: {
        ...mapState(['hasLogin','userInfo']),
    },
	data() {
		return {
            kefu:false,//客服弹出层
            huifu:false,//评论或回复的弹出层
            reply:false,//回复评论或回复回复

			// 服务器上请求回来的商品信息
			goodsData:{
                client_id:null,
				client_info: null,
				comment_count: 0,
				cover: null,
				cover_info: {src:''},//轮播主图数据
				created_at: null,
				deleted_at: null,
				desc: '加载中……',
				id: null,
				name: '加载中……',
				number: 0,
				picture: [],//轮播主图数据
				price: 0.00,
				updated_at: null,
			},
            //服务器上请求回来的评论数据
            goodsDataComment: [],

            loadMoreStatus: 'more',//评论加载更多
            CommnetPage:1,

			requestData:{
			    addShoppingCartNum:1,
				msg: '',//评论或回复内容
                replyMsg:'',//回复内容
                comment_id:0,//评论id
                to_client_id:0,//被回复人id
            }
		};
	},
	onLoad(option) {
        this.loadGoodsData(option.id);//获取商品的详细信息
        this.loadGoodsComment(option.id);//获取商品的评论信息
	},
	//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
	onReachBottom() {
        this.loadGoodsComment(this.goodsData.id);//获取商品的评论信息
	},
	mounted () {
	},
	methods: {
		...mapMutations(['buyList']),
        // 评论
        showhuifu(){
            this.huifu =true;
		},
        closeHuifu(){
            this.huifu =false;
		},
        async goHuifu(){
            let data = {goods_id: this.goodsData.id, msg: this.requestData.msg};
            await this.$api.MyRequest(goods.PostGoodsComment.url, goods.PostGoodsComment.method, data)
                .then(res => {
					this.goodsData.comment_count = parseInt(this.goodsData.comment_count)+1;
                    this.requestData.msg = '';
                    this.goodsDataComment = [];
                    this.CommnetPage = 1;
                    this.loadGoodsComment(this.goodsData.id);
                })
                .catch(err => {
                });
        },
        delHuifu(clientId, index, id) {
          // console.log(index,id);
			// if (this.hasLogin && this.userInfo.id)
            if (this.hasLogin && this.userInfo.id === clientId) {
				uni.showModal({
					title: '提示',
					content: '确定删除本条提问吗？',
					success:  (res) => {
						if (res.confirm) {
							// console.log('用户点击确定');
							this.goDelHuifu(index, id)
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
            }
		},
        async goDelHuifu(index, id){
            await this.$api.MyRequest(goods.DeleteGoodsComment.url + id, goods.DeleteGoodsComment.method)
                .then(res => {
                    this.goodsDataComment.splice(index,1);
                    this.msg('删除成功！')
                })
                .catch(err => {
                });
		},

		//回复评论
        showReply(comment_id,to_client_id){
            this.reply =true;
            // console.log(comment_id,to_client_id)
			this.requestData.comment_id = comment_id;
            this.requestData.to_client_id =to_client_id;
        },
        async goReply(){
            let data = {
                comment_id: this.requestData.comment_id,
				reply_msg: this.requestData.replyMsg,
                to_client_id: this.requestData.to_client_id,
			};
            await this.$api.MyRequest(goods.PostGoodsCommentReply.url, goods.PostGoodsCommentReply.method, data)
                .then(res => {
                    this.CommnetPage = 1;
                    this.loadGoodsComment(this.goodsData.id);
                    this.requestData.replyMsg = '';
                    this.goodsDataComment = [];

                })
                .catch(err => {
                });
		},
        closeReply(){
            this.reply =false;
		},

		//客服
        showKefu(){
            this.kefu= true;
		},
        closeKefu(){
            this.kefu= false;
		},
        goKefu(){
            uni.makePhoneCall({
                phoneNumber: this.goodsData.client_info.mobile //仅为示例
            });
        },

		//选择购买数量
        numberChange(data) {
            this.requestData.addShoppingCartNum = data.number;
		},

		//获取商品的信息
        async loadGoodsData(goodsid) {
            await this.$api.MyRequest(goods.GetShowGoods.url + goodsid, goods.GetShowGoods.method)
                .then(res => {
                   this.goodsData = res
                })
                .catch(err => {
                });
        },
		//获取评论信息
		async loadGoodsComment(goodsid) {
            await this.$api.MyRequest(goods.GetGoodsComment.url + goodsid, goods.GetGoodsComment.method, {page:this.CommnetPage})
                .then(res => {
                    if (res.data.length != 0) {
                        this.CommnetPage = res.current_page + 1;
                        this.goodsDataComment = this.goodsDataComment.concat(res.data);
                        this.loadMoreStatus = 'more'
                    }
                    else {
                        this.loadMoreStatus = 'noMore'
                    }
                })
                .catch(err => {
                });
		},

		// 加入购物车
        async joinCart(){
            let data = { goods_id: this.goodsData.id, num: this.requestData.addShoppingCartNum};
            await this.$api.MyRequest(cart.PostShoppingCart.url, cart.PostShoppingCart.method, data)
                .then(res => {
					this.msg('已加入购物车');
                })
                .catch(err => {
                });
		},

		//立即购买
		buy(){
            if (!this.hasLogin) {
			    this.msg('请登录后操作');
			    return;
			}
            if (this.hasLogin && this.goodsData.client_id === this.userInfo.id) {
                this.msg('不能购买自己发布的商品哦！');
                return;
            }
            let data = [{
                num:this.requestData.addShoppingCartNum,
				goods_info:this.goodsData
			}];
            this.buyList(data);
            //跳转确认订单页面
            uni.navigateTo({
                url:'../goods/confirmation'
            })
		},
		//返回上一页
		back() {
			uni.navigateBack();
		},
	}
};
</script>

<style lang="scss">
page {
	background-color: #f8f8f8;
}
uni-image{
	width: 100% !important;
}
uni-video{
	width: 100%!important;
}
@font-face {
	font-family: 'HMfont-home';
	src: url('data:application/x-font-woff2;charset=utf-8;base64,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')
		format('woff2');
}
.icon {
	font-family: 'HMfont-home' !important;
	font-size: 26upx;
	font-style: normal;
	&.fenxiang {
		&:before {
			content: '\e642';
		}
	}
	&.xiangqian {
		&:before {
			content: '\e634';
		}
	}
	&.xiangyou {
		&:before {
			content: '\e637';
		}
	}
	&.shoucangsel {
		&:before {
			content: '\e62c';
		}
	}
	&.shoucang {
		&:before {
			content: '\e62e';
		}
	}
	&.tongzhi {
		&:before {
			content: '\e729';
		}
	}
	&.kefu {
		&:before {
			content: '\e61e';
		}
	}
	&.cart {
		&:before {
			content: '\e614';
		}
	}
	&.jia {
		&:before{content:"\e641";}
	}
	&.jian {
		&:before{content:"\e643";}
	}
}

.swiper-box {
	width: 100%;
	height: 100vw;
	swiper {
		width: 100%;
		height: 100vw;
		swiper-item {
			image {
				width: 100%;
				height: 100vw;
			}
		}
	}
}
.info-box {
	width: 100%;
	padding: 20upx 4%;
	background-color: #fff;
	margin-bottom: 20upx;
}

.goods-info {
	.price {
		font-size: 46upx;
		font-weight: 600;
		color: #f47925;
		span {
			color: #303133;
			font-size: 30upx;
			padding: 10upx;
		}
	}
	.title {
		font-size: 30 upx;
	}
}
.spec {
	.row {
		width: 100%;
		display: flex;
		align-items: center;
		margin: 0 0 30upx 0;
		.text {
			font-size: 24upx;
			color: #a2a2a2;
			margin-right: 20upx;
		}
		.content {
			font-size: 28upx;
			display: flex;
			flex-wrap: wrap;
			.serviceitem{
				margin-right: 10upx;
			}
			.sp {
				width: 100%;
				display: flex;
				view {
					background-color: #f6f6f6;
					padding: 5upx 10upx;
					color: #999;
					margin-right: 10upx;
					font-size: 20upx;
					border-radius: 5upx;
					&.on{
						border: solid 1upx #f47952;
						padding: 4upx 8upx;
					}
				}
			}
		}
		.arrow {
			position: absolute;
			right: 4%;
			.icon {
				color: #ccc;
			}
		}
	}
}
.comments {
	margin-bottom: 100upx;
	.row {
		width: 100%;
		height: 40upx;
		display: flex;
		align-items: center;
		margin: 0 0 30upx 0;
		.text {
			font-size: 30upx;
		}
		.arrow {
			font-size: 28upx;
			position: absolute;
			right: 4%;
			color: #17e6a1;
			.show {
				display: flex;
				align-items: center;
				.icon {
					color: #17e6a1;
				}
			}
		}
	}
	.uni-comment {
		padding: 5rpx 0;
		display: flex;
		flex-grow: 1;
		flex-direction: column;
		font-size: 28upx;
	}

	.uni-comment-list {
		flex-wrap: nowrap;
		padding: 10rpx 0;
		margin: 10rpx 0;
		width: 100%;
		display: flex;
	}

	.uni-comment-face {
		width: 70upx;
		height: 70upx;
		border-radius: 100%;
		margin-right: 20upx;
		flex-shrink: 0;
		overflow: hidden;
	}

	.uni-comment-face image {
		width: 100%;
		border-radius: 100%;
	}

	.uni-comment-body {
		width: 100%;
	}

	.uni-comment-top {
		line-height: 1.5em;
		justify-content: space-between;
	}

	.uni-comment-top text {
		color: #0A98D5;
		font-size: 24upx;
	}

	.uni-comment-top .uni-comment-date {
		padding: 10upx;
		line-height: 38upx;
		color: #666666;
		font-size: 24upx;
	}

	.uni-comment-content {
		line-height: 1.6em;
		font-size: 28upx;
		padding: 8rpx 0;
	}

	.uni-comment-replay-btn {
		background: #FFF;
		font-size: 24upx;
		line-height: 28upx;
		padding: 5rpx 20upx;
		border-radius: 30upx;
		color: #333 !important;
		margin: 0 10upx;
	}
}
.description {
	.title {
		width: 100%;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26upx;
		color: #999;
	}
}
.footer {
	position: fixed;
	bottom: 0upx;
	width: 100%;
	padding: 0 4%;
	height: 99upx;
	border-top: solid 1upx #eee;
	background-color: #fff;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.icons {
		display: flex;
		height: 80upx;
		margin-left: -4%;
		width: auto;
		.box {
			width: 80upx;
			height: 80upx;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			.icon {
				font-size: 40upx;
				color: #828282;
			}
			.text {
				display: flex;
				justify-content: center;
				width: 100%;
				font-size: 22upx;
				color: #666;
			}
		}
		view{
			position: relative;
			display: flex;
			align-items: center;
			width: auto;
			.uni-numbox{
				left: 0!important;
			}
		}

	}
	.btn {
		height: 80upx;
		border-radius: 40upx;
		overflow: hidden;
		display: flex;
		margin-right: -2%;
		.joinCart,
		.buy {
			height: 80upx;
			padding: 0 40upx;
			color: #fff;
			display: flex;
			align-items: center;
			font-size: 28upx;
		}
		.joinCart {
			background-color: #f0b46c;
		}
		.buy {
			background-color: #f06c7a;
		}
	}
}
.popup {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 20;
	display: none;
	.mask{
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 21;
		background-color: rgba(0, 0, 0, 0.6);
	}
	.layer {
		position: fixed;
		z-index: 22;
		bottom: -70%;
		width: 100%;
		padding: 0 4%;
		height: 70%;
		border-radius: 20upx 20upx 0 0;
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		.content {
			width: 100%;
			padding: 20upx 0;
		}
		.btn {
			width: 100%;
			height: 100upx;
			.button {
				width: 100%;
				height: 80upx;
				border-radius: 40upx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #f47952;
				font-size: 28upx;
			}
		}
	}
	@keyframes showPopup {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes hidePopup {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	@keyframes showLayer {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(-100%);
		}
	}
	@keyframes hideLayer {
		0% {
			transform: translateY(-100%);
		}
		100% {
			transform: translateY(0);
		}
	}
	&.show {
		display: block;
		.mask{
			animation: showPopup 0.25s linear both;
		}
		.layer {
			animation: showLayer 0.25s linear both;
		}
	}
	&.hide {
		display: block;
		.mask{
			animation: hidePopup 0.25s linear both;
		}
		
		.layer {
			animation: hideLayer 0.25s linear both;
		}
	}
	&.none {
		display: none;
	}
	&.service {
		.row {
			margin: 30upx 0;
			.title {
				font-size: 30upx;
				margin: 10upx 0;
			}
			.description {
				font-size: 28upx;
				color: #999;
			}
		}
	}
	&.spec {
		.title {
			font-size: 30upx;
			margin: 30upx 0;
		}
		.sp {
			display: flex;
			view {
				font-size: 28upx;
				padding: 5upx 20upx;
				border-radius: 8upx;
				margin: 0 30upx 20upx 0;
				background-color: #f6f6f6;
				&.on {
					padding: 3upx 18upx;
					border: solid 1upx #f47925;
				}
			}
		}
		.length{
			margin-top: 30upx;
			border-top: solid 1upx #aaa;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 20upx;
			.text{
				font-size: 30upx;
			}
			.number{
				display: flex;
				justify-content: center;
				align-items: center;
				.input{
					width: 80upx;
					height: 60upx;
					margin: 0 10upx;
					background-color: #f3f3f3;
					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;
					input{
						width: 80upx;
						height: 60upx;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						font-size: 26upx;
					}
				}
				
				.sub ,.add{
					width: 60upx;
					height: 60upx;
					background-color: #f3f3f3;
					border-radius: 5upx;
					.icon{
						font-size: 30upx;
						width: 60upx;
						height: 60upx;
						display: flex;
						justify-content: center;
						align-items: center;
						
					}
				}
			}
		}
		
	}
}
.input-name,
.input-password {
	height: 80upx;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	position: relative;
	padding-left: 30upx;
	box-sizing: border-box;
}

.input-name::after {
	content: " ";
	position: absolute;
	left: 30upx;
	bottom: 0;
	right: 0;
	height: 1px;
	/*border-top: 1px solid #e5e5e5;*/
	transform-origin: 0 0;
	transform: scaleY(.5);
}

.input-name view,
.input-password view {
	width: 120upx;
	height: 50upx;
	line-height: 50upx;
	font-size: 28upx;
	color: #333333;
}

.input-name input,
.input-password input {
	flex: 1;
	height: 50upx;
	line-height: 50upx;
}
</style>
